<template>
	<div>
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="900px">
			<el-form ref="pageDialogRef" :rules="rules" :model="state.ruleForm" size="default" label-width="90px">
				<el-form-item label="页面名称" prop="urlName">
					<el-input v-model="state.ruleForm.urlName" placeholder="请输入页面名称" clearable></el-input>
				</el-form-item>
				<el-form-item label="活动链接" prop="urlContent">
					<el-input v-model="state.ruleForm.urlContent" placeholder="请输入页面链接" clearable></el-input>
				</el-form-item>
				<el-form-item label="页面分类" prop="urlType">
					<el-select v-model="state.ruleForm.urlType" placeholder="选择属性类型" style="width: 100%">
						<el-option v-for="item in state.pageTypes" :key="item.type" :label="item.title" :value="item.title" />
					</el-select>
				</el-form-item>
			</el-form>

			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit(pageDialogRef)" size="default">{{ state.dialog.submitTxt }}</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { type FormInstance, type FormRules } from 'element-plus';
import { dictApi } from '/@/api/sys/dict/index';
import { dataPageApi } from '/@/api/shop/data/page/index';
import messageUtils from '/@/utils/messageUtils';
const emit = defineEmits(['refresh']);
const pageDialogRef = ref();
const state = reactive({
	ruleForm: {
		id: '',
		urlName: '',
		urlContent: '',
		urlType: '',
	},
	pageTypes: [] as any,

	dialog: {
		isShowDialog: false,
		type: '',
		title: '新增页面',
		submitTxt: '新增',
	},
});

const rules = reactive<FormRules>({
	urlName: [{ required: true, message: '请输入页面名称', trigger: 'blur' }],
	urlContent: [{ required: true, message: '请输入页面内容 ', trigger: 'blur' }],
	urlType: [{ required: true, message: '请选择页面分类', trigger: 'blur' }],
});

const onCancel = () => {
	closeDialog();
};

const closeDialog = () => {
	state.dialog.isShowDialog = false;
	pageDialogRef.value.resetFields();
	emit('refresh');
};

const loadAllPageTypes = async () => {
	const { data } = await dictApi().queryByCategory('page_type');
	console.log('data: ', data);
	state.pageTypes = data;
};

const openDialog = async (type: string, id: string) => {
	loadAllPageTypes();
	if (type === 'edit') {
		state.dialog.type = 'edit';

		state.dialog.submitTxt = '更新';

		state.dialog.title = '更新页面';
		const { data } = await dataPageApi().view(id);
		console.log('data: ', data);
		state.ruleForm.id = id;
		state.ruleForm.urlContent = data.urlContent;
		state.ruleForm.urlName = data.urlName;
		state.ruleForm.urlType = data.urlType;
	} else {
		state.dialog.type = 'add';
	}
	state.dialog.isShowDialog = true;
};

const onSubmit = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate(async (valid) => {
		if (valid) {
			try {
				if (state.dialog.type === 'edit') {
					await dataPageApi().update({
						id: state.ruleForm.id,
						urlName: state.ruleForm.urlName,
						urlType: state.ruleForm.urlType,
						urlContent: state.ruleForm.urlContent,
					});
				} else {
					await dataPageApi().create({
						urlName: state.ruleForm.urlName,
						urlType: state.ruleForm.urlType,
						urlContent: state.ruleForm.urlContent,
					});
				}
				messageUtils().success('操作成功');
				onCancel();
			} catch (e) {
				messageUtils().error('操作失败，请重试!');
			}
		}
	});
};
defineExpose({ openDialog });
</script>

<style scoped lang="scss"></style>
